<template>
	<div class="icon-dialog">
		<p>{{ iconsVisibles }}</p>
		<el-dialog v-model="iconsVisibles" append-to-body width="980px" @open="onOpen" @close="onClose">
			<template #header="{ titleId, titleClass }">
				<h4 :id="titleId" :class="titleClass">选择图标</h4>
				<el-input v-model="key" :style="{ width: '260px' }" size="mini" placeholder="请输入图标名称" prefix-icon="el-icon-search" clearable />
			</template>
			<ul class="icon-ul">
				<li v-for="icon in iconList" :key="icon" :class="active === icon ? 'active-item' : ''" @click="onSelect(icon)">
					<SvgIcon :name="icon" :size="24" />
					<div>{{ icon }}</div>
				</li>
			</ul>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
// import iconList from './icon.json'
import initIconfont from '/@/utils/getStyleSheets';
const props = defineProps(['current', 'iconsVisible']);
const emit = defineEmits(['clone', 'select']);

let iconList = ref();
let active = ref();
let key = ref();
let iconsVisibles = ref(false);
watch(
	() => props.iconsVisible,
	async () => {
		iconsVisibles.value = props.iconsVisible;
		iconList.value = await initIconfont.ele();
	},
	{
		immediate: true,
	}
);
onBeforeMount(async () => {});
const onOpen = () => {
	active.value = props.current;
	key.value = '';
};
const onClose = () => {
	emit('clone');
};
const onSelect = (icon: string) => {
	active.value = icon;
	emit('select', icon);
	onClose();
};
</script>
<style lang="scss" scoped>
.icon-ul {
	margin: 0;
	padding: 0;
	font-size: 0;
	li {
		list-style-type: none;
		text-align: center;
		font-size: 14px;
		display: inline-block;
		width: 16.66%;
		box-sizing: border-box;
		height: 108px;
		padding: 15px 6px 6px 6px;
		cursor: pointer;
		overflow: hidden;
		&:hover {
			background: #f2f2f2;
		}
		&.active-item {
			background: #e1f3fb;
			color: #7a6df0;
		}
		> i {
			font-size: 30px;
			line-height: 50px;
		}
	}
}
.icon-dialog {
	:deep(.el-dialog) {
		border-radius: 8px;
		margin-bottom: 0;
		margin-top: 4vh !important;
		display: flex;
		flex-direction: column;
		max-height: 92vh;
		overflow: hidden;
		box-sizing: border-box;
		.el-dialog__header {
			padding-top: 14px;
		}
		.el-dialog__body {
			margin: 0 20px 20px 20px;
			padding: 0;
			overflow: auto;
		}
	}
}
</style>
